<template>
    <div>
      <div style="margin-bottom: 10px;">
          <el-input style="width:200px" placeholder="查询性名" v-model="name"></el-input> 
          <el-input style="width:200px ; margin:0 5px" placeholder="查询项目名称" v-model="projectName"></el-input>
          <el-button type="primary" @click="load(1)">查询</el-button>
          <el-button type="info" @click="reset">重置</el-button>
      </div>
      <el-table :data="tableData" stripe :header-cell-style="{backgroundColor: 'aliceblue',color:'#666'}" >
          <el-table-column prop="id" label="序号" width="70"></el-table-column>
          <el-table-column prop="username" label="用户名"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column prop="projectName" label="项目名称"></el-table-column>
          <el-table-column prop="project" label="项目内容"></el-table-column>
          <el-table-column prop="annexes" label="附件">
            <template v-slot="scope">
                <el-button v-if="scope.row.annexes" @click="preview(scope.row.annexes)" >预览</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="手机号"></el-table-column>
          <el-table-column prop="status" label="状态"></el-table-column>
          <el-table-column prop="reason" label="原因"></el-table-column>
          <el-table-column  label="头像">
              <template v-slot="scope">
                  <div style="display: flex; align-items: center;">
                      <el-image style="width: 50px; height: 50px; border-radius: 50%;" v-if="scope.row.avatar" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]"></el-image>
                  </div>
              </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="300px">
              <template v-slot="scope">
                  <el-button size="mini" type="primary" plain @click="handleEdit(scope.row)" v-if="user.role === '管理员' ">编辑</el-button>
                  <el-button size="mini" type="success" plain @click="audit(scope.row)" v-if="user.role === '教师' ">审核</el-button>
                  <el-button size="mini" type="danger" plain @click="del(scope.row.id)" v-if="user.role === '管理员' ">删除</el-button>
              </template>
          </el-table-column>
      </el-table>  
      <div style="margin: 10px 0;">
          <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total">
          </el-pagination>
      </div>  
      <el-dialog title="项目" :visible.sync="fromVisible" width="30%">
          <el-form :model="form" label-width="80px" style="padding-right: 20px;" :rules="rules" ref="formRef">
              <el-form-item label="项目" prop="projectName">
                  <el-input v-model="form.projectName" placeholder="项目名称"></el-input>
              </el-form-item>
              <el-form-item label="项目内容" prop="project">
                  <el-input type="textarea" v-model="form.project" placeholder="内容"></el-input>
              </el-form-item>
              <el-form-item label="项目日期" prop="time">
                <el-date-picker v-model="form.time" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"> </el-date-picker>
              </el-form-item>
              
          </el-form>
  
          <div slot="footer" class="dialog-footer">
              <el-button @click="fromVisible = false">取 消</el-button>
              <el-button type="primary" @click="save">确 定</el-button>
          </div>
      </el-dialog>
      <el-dialog title="审核" :visible.sync="auditVisible" width="30%">
          <el-form :model="form" label-width="80px" style="padding-right: 20px;" :rules="rules" ref="formRef">
            <el-form-item label="审核状态" label-width="15%">
                <el-radio v-model="form.status" label="审核通过"></el-radio>
                <el-radio v-model="form.status" label="审核不通过"></el-radio>
            </el-form-item>
            <el-form-item label="审核意见" prop="reason">
                <el-input type="textarea" v-model="form.reason" ></el-input>
            </el-form-item>
          </el-form>
  
          <div slot="footer" class="dialog-footer">
              <el-button @click="auditVisible = false">取 消</el-button>
              <el-button type="primary" @click="save">确 定</el-button>
          </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
      data(){
          return{
              tableData:[],  //所有的数据
              pageNum:1,  //当前的页码
              pageSize:5, //每页显示个数
              username:'',
              name:'',
              projectName:'',
              total:0,
              fromVisible:false,
              auditVisible:false,
              form:{},
              user:JSON.parse(localStorage.getItem('honey-user') ||('{}')),
              rules: {
                  username: [
                      { required: true, message: '请输入账号', trigger: 'blur' },
                  ],
              },
              ids:[]
          }
      },
      created(){
          this.load()
      },
      methods:{
        preview(url){
            window.open(url)
        },
          reset(){
              this.name = ''
              this.username =''
              this.load()
          },
          handleCurrentChange(pageNum){
              this.load(pageNum)
          },
          load(pageNum){  //分页查询   传入一个pageNum默认值1，每次查询后显示第一页的数据
              if(pageNum){
                  this.pageNum = pageNum
              }
              this.$request.get('/teacher/selectByPage',{
                  params:{
                      pageNum: this.pageNum,
                      pageSize: this.pageSize,
                      name:this.name,
                      projectName:this.projectName,

                  }
              }).then(res=>{
              this.tableData = res.data.records
              this.total=res.data.total
          })
          },
          handleAvatarSuccess(response ,file ,fileList){
              //把user头像属性换成上传头像图片的连接
              this.form.avatar = response.data
          },
          save(){  //保存按钮触发逻辑 触发新增或更新
              this.$refs.formRef.validate((valid) => {
            if (valid) {
              // 验证通过
              this.$request({
                  url: this.form.id ?  'teacher/update' :'teacher/add',
                  method:this.form.id? 'PUT' :'POST',
                  data:this.form
              }).then(res=>{
                  if(res.code ==='200'){    //表示成功保存
                      this.$message.success('保存成功')
                      this.load(1)
                      this.fromVisible = false
                  }else{
                      this.$message.error(res.msg) //弹出错误信息
                  }
              })
            }
          })
          },
          handleEdit(row){         //编辑数据
              this.form =JSON.parse(JSON.stringify(row))   //给form对象赋值 注意要深拷贝
              this.fromVisible =true 
          },
          del(id){
              this.$confirm('您确认删除吗？','确认删除',{type: "warning"}).then(response=>{
                  this.$request.delete('/teacher/delete/'+ id).then(res=>{
                      if(res.code ==='200'){
                          this.$message.success('操作成功')
                          this.load(1)
                      }else{
                          this.$message.error(res.msg)
                      }
                  })
                  
              }).catch(()=>{})
          },
          audit(row){
            this.form =JSON.parse(JSON.stringify(row))
            this.auditVisible=true
          }
      },
  }
  </script>
  
  <style>
  
  </style>